<template>
  <div class="pieChartEcahrts-box">
    <!-- 背景图 -->
    <!-- <div class="BgImageBox"></div> -->
    <!-- 饼图 -->
    <div
      ref="myChartsRef"
      :style="{ height: height, width: width }"
      class="echarts"
    ></div>
  </div>
</template>
<script setup>
import { nextTick } from "vue"
const emit = defineEmits(["click_Fun"])
const { appContext } = getCurrentInstance()
const { $echarts, fontSize } = appContext.config.globalProperties

const props = defineProps({
  width: {
    default: "100%",
    type: String
  },
  height: {
    default: "100%",
    type: String
  },
  meiguiList: {
    type: Array
  }
})

const myChartsRef = ref()

// 渲染echarts
const initEcharts = () => {
  let myChart = $echarts.getInstanceByDom(myChartsRef.value)
  if (myChart) {
    myChart.dispose()
  }
  myChart = $echarts.init(myChartsRef.value)

  let option = {
    color: [
      "rgba(83, 202, 255,.5)",
      "rgba(255, 167, 38,.5)",
      "rgba(65, 211, 72,.5)"
    ],
    title: {
      text: "",
      left: "center",
      top: 80,
      textStyle: {
        color: "#fff",
        fontSize: 20
      }
    },
    legend: {
      top: "666px",
      icon: "circle",
      textStyle: {
        color: "#fff"
      },
      itemWidth: 10,
      itemHeight: 10
    },
    tooltip: {
      confine: true,
      trigger: "item",
      formatter: "{b} : {c}"
    },
    series: [
      {
        avoidLabelOverlap: false,
        type: "pie",
        roseType: "area", // 玫瑰图
        center: ["50%", "50%"],
        radius: ["0%", "70%"],
        label: {
          normal: {
            formatter: "{b}\n-------------\n{d}%\t{c}",
            textStyle: {
              color: "#fff",
              fontSize: fontSize(40)
            }
          }
        },
        labelLine: {
          normal: {
            length: 10,
            length2: 30
          }
        },
        data: props.meiguiList
      }
    ]
  }

  setTimeout(() => {
    myChart.resize()
  }, 1000)
  myChart.setOption(option)
}

onMounted(() => {
  console.log(props.barChartList)

  nextTick(() => {
    initEcharts()
  })
  addEventListener("resize", () => {
    initEcharts()
  })
})

// watch(
//   () => props.option,
//   (val) => {
//     //// console.log(val);
//     nextTick(() => {
//       if (myChart.value) {
//         initEcharts()
//       }
//     })
//   },
//   {
//     deep: true
//   }
// )
</script>
<style scoped lang="less">
.pieChartEcahrts-box {
  width: 100%;
  height: 100%;
  position: relative;
  .echarts {
    width: 100%;
    height: 100%;
  }
  .BgImageBox {
    position: absolute;
    left: 11%;
    top: 15%;
    width: 112px;
    height: 112px;
    // background-color: red;
    background: url("@/assets/Left/Plan/HUANXINGTUWAIKUANG@2x.png") no-repeat
      center;
    background-size: 100% 100%;
  }
}
</style>
